<template>
  <div>
    <Search />
    <Tabs :tabs="tabs" @tabsItemChange="onTabsParent">
      <div v-if="tabs[0].isActive" slot="content">
        <div class="first_tab">
          <div
            class="goods_item"
            v-for="(item,index) in goodsList"
            :key="index"
            @click="toGoodsDetail(item.goods_id)"
          >
            <div class="goods_img">
              <img
                :src="item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'"
              />
            </div>
            <div class="goods_info">
              <div class="goods_name">{{item.goods_name}}</div>
              <div class="goods_price">{{item.goods_price}}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tabs[1].isActive" slot="content">销量</div>
      <div v-if="tabs[2].isActive" slot="content">价格</div>
    </Tabs>
  </div>
</template>

<script>
import Search from '../components/Search'
import Tabs from '../components/Tabs'
export default {
  components: { Search, Tabs },
  data() {
    return {
      tabs: [
        {
          id: 0,
          value: '综合',
          isActive: true
        },
        {
          id: 1,
          value: '销量',
          isActive: false
        },
        {
          id: 2,
          value: '价格',
          isActive: false
        }
      ],
      // 请求数据
      queryInfo: {
        query: '',
        cid: '',
        pagenum: 1,
        pagesize: 10
      },
      goodsList: [],
      totalPage: 0
    }
  },
  methods: {
    // tabs组件 拿到的数据 处理
    onTabsParent(index) {
      console.log('父接收的', index)
      this.tabs.forEach((v, i) => {
        i === index ? (v.isActive = true) : (v.isActive = false)
      })
    },
    // 请求数据
    async getGoodsList() {
      console.log('goodslist')
      const { data: res } = await this.$http.get('goods/search', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) return this.$toast(`${res.meta.msg}`)
      this.$toast(`${res.meta.msg}`)
      console.log('goods_list-请求', res)
      this.goodsList = [...this.goodsList, ...res.message.goods]
      this.totalPage = Math.ceil(res.message.total / this.queryInfo.pagesize)
    },
    toGoodsDetail(goods_id) {
      this.$router.push({ name: 'GoodsDetail', params: { goods_id: goods_id } })
    }
  },
  created(options) {
    console.log('cid为', this.$route.params.cid)
    // 通过 分类页面 传入的cid 有则用没有就空
    this.queryInfo.cid = this.$route.params.cid || ''
    this.queryInfo.query = this.$route.params.query || ''
    this.getGoodsList()
  },
  // 页面触底
  onReachBottom: function() {
    console.log('触底')
    if (this.queryInfo.pagenum >= this.totalPage) {
      // wx.showToast({
      //   title: '没有下一页数据了'
      // });
      console.log(
        '%c没数据了',
        'color: #43bb88;font-size: 24px;font-weight: bold;text-decoration: underline;'
      )
      this.queryInfo.pagenum = this.totalPage
    } else {
      this.queryInfo.pagenum++
      console.log(this.queryInfo.pagenum)
      // 获取数据列表
      this.getGoodsList()
    }
  },
  // 下拉刷新
  onPullDownRefresh: function() {
    console.log('refresh')
    this.goodsList = []
    this.getGoodsList()
  }
}
</script>

<style lang='less' scope>
.first_tab {
  .goods_item {
    display: flex;
    border-bottom: 5rpx solid #333;

    .goods_img {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      // padding: 5rpx;

      img {
        width: 70%;
        height: 100%;
      }
    }

    .goods_info {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      // 文字
      .goods_name {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .goods_price {
        color: var(--themeColor);
        font-size: 32rpx;
      }
    }
  }
}
</style>
